<template>
	<view class="categorize">
		<view class="categorizeBox">
			<view class="loadBox" v-if="!load">
				<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
			</view>
			<block>
				<view class="navBox">
					<topStatus></topStatus>
					<view class="tabsBack">
						<image class="logoimg" style="opacity: 0;" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240223144208.png"></image>
					</view>
					<view class="searchCell" @click="nav_to('/pages/store/searchShop')">
						<image src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240800513109.png" class="searchimg"></image>
						<view class="scInp">
							<input disabled type="text" v-model="searchContent" placeholder="| 点击搜索商品" placeholder-class="placname" />
						</view>
						<view class="scBtnBox">
							<view class="scSumBtn">搜索</view>
						</view>
					</view>
				</view>
				<view class="cateBox" :style="{ height: 'calc(100vh - ' + fixboxHeight + 'px)' }">
					<view class="cateLeft">
						<block v-for="(item, index) in cateList" :key="index">
							<view
								class="clCell"
								:class="[
									index == chooseCate.index ? 'clCellActive' : '',
									index == chooseCate.index - 1 ? 'clCellAcTop' : '',
									index == chooseCate.index + 1 ? 'clCellAcBottom' : '',
								]"
								@click="clickCate(item, index)"
							>
								<view class="clCTit">
									{{ item.CataName }}
								</view>
							</view>
						</block>
						<view class="clBgBox"></view>
					</view>
					<view class="cateRight">
						<scroll-view
							id="scrollview"
							:scroll-top="scrollTop"
							:scroll-with-animation="true"
							:scroll-y="true"
							:scroll-anchoring="true"
							class="scroll-wrap"
							@scrolltolower="scrolltolower"
							:style="{ height: 'calc(100vh - ' + fixboxHeight + 'px)' }"
						>
							<view class="shopBox">
								<view class="shopSwiper">
									<swiper
										v-if="bannerList.length"
										class="barimg"
										:indicator-dots="true"
										:autoplay="true"
										:interval="3000"
										:duration="1000"
										indicator-active-color="#ff531c"
									>
										<swiper-item v-for="(item, index) in bannerList" :key="index" @click="gotobanner(item)">
											<image :src="item.Banner" mode="aspectFill"></image>
										</swiper-item>
									</swiper>
								</view>
								<view class="shopBoxList">
									<view class="shopCellBox" v-for="(item, index) in shopList" :key="index">
										<view class="heat_shop" @click="goDetail(item.ID)">
											<image class="heat_spimg" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
											<view class="right_shop">
												<view class="heat_spname">{{ item.ProductName }}</view>
												<view
													class="good_label"
													:class="item.PromotionType == '预售' ? 'good_label_green' : ''"
													v-if="item.PromotionType"
												>
													{{ item.PromotionType }}
												</view>

												<view class="heat_price_box">
													<view class="heat_price">
														<text class="pr_icon">￥</text>
														{{ item.Price }}
													</view>
													<!-- <view class="heat_payCount">
                                                        已售 {{ getPayCount(item.VirtualSellNum) || '0' }}
                                                    </view> -->
												</view>
												<view class="shopBtnBox">
													<view class="heat_payCount">已售 {{ getPayCount(item.VirtualSellNum) || '0' }}</view>
													<view class="shopAddBtn">
														<!-- <image
															class="pay_icon"
															src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1739781720696810.png"
														></image> -->
														<!-- @click.stop="addShop(item)" -->
														<view class="pay_text" >查看</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- <BtmLogo></BtmLogo> -->
				<!-- <view style="height: 20rpx;"></view> -->
				<uni-popup ref="buyNember" type="bottom" border-radius="24">
					<view class="obj_choose">
						<view class="obj_preview">
							<view class="obj_img">
								<image :src="shopDetails.Images ? shopDetails.Images.split(',')[0] : ''" mode="aspectFill"></image>
							</view>
							<view class="obj_info">
								<view class="obj_price">
									<block v-if="selectedStyle.Promotion">
										<view class="obj_price_text">单价</view>
										<view class="price">
											<view class="dollor">￥</view>
											{{ selectedStyle.Promotion }}
										</view>
										<view class="promotion">
											<view class="dollor">￥</view>
											{{ selectedStyle.Price }}
										</view>
									</block>
									<block v-else>
										<view class="price">
											<view class="dollor">￥</view>
											{{ selectedStyle.Price }}
										</view>
									</block>
								</view>
								<view class="discountBox" v-if="selectedStyle.Discounts > 0">
									<view class="disPrice">已优惠{{ selectedStyle.Discounts }}</view>
								</view>
								<view class="obj_select">
									<text class="obj_selected">已选</text>
									<text class="obj_text">{{ selectedStyle.Style }}，{{ quantity }}份</text>
								</view>
							</view>
							<view class="obj_close" @tap="closePopup">
								<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721635178667747.png" mode=""></image>
							</view>
						</view>
						<view class="obj_head">
							<view class="obj_title">选择规格</view>
							<view class="obj_specs">
								<view
									class="obj_spec"
									v-for="(spec, index) in ProductsList"
									:key="index"
									:class="{ obj_spec1: index === selectedSpecIndex }"
									@click="selectSpec(index)"
								>
									{{ spec.Style }}
								</view>
							</view>
						</view>
						<view class="obj_body" style="margin: 0">
							<view class="obj_title">选择数量</view>
							<view class="obj_number">
								<view class="obj_compute minus">
									<image :src="minusImage" mode="" @tap="decrease"></image>
								</view>
								<input type="number" :value="quantity" min="1" :max="shopDetails.stock" @change="handleQuantityChange" />
								<view class="obj_compute plus">
									<image :src="plusImage" mode="" @tap="increase"></image>
								</view>
							</view>
						</view>
						<block v-if="payType == 0">
							<view class="address_box" @click="nav_to('/pages/Myaddress/selectAddress?type=1')">
								<view class="address_cell">
									<view class="icon">
										<image
											src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722933899855827.png"
											mode="aspectFill"
										></image>
									</view>
									<view class="address_content">
										<view class="cell_name">
											{{ myAddress ? `${myAddress.Accepter} ${myAddress.Phone}` : '请选择收货地址' }}
										</view>
										<uni-icons type="right" size="14"></uni-icons>
									</view>
								</view>
								<view class="address_cell" v-if="myAddress">
									<view class="icon"></view>
									<view class="address_content">
										<view class="cell_name cell_lit">
											{{ myAddress.Province }}{{ myAddress.City }}{{ myAddress.Area || '' }}{{ myAddress.Address }}
										</view>
									</view>
								</view>
							</view>
						</block>
						<view class="obj_bottom">
							<view class="obj_btn2" @click="cart_add()">加入购物车</view>
						</view>
					</view>
				</uni-popup>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			load: false, //是否加载
			searchContent: '', //搜索的内容,
			fixboxHeight: 510,
			scrollTop: 0,
			chooseCate: {
				CataName: '水果',
				ID: 1,
				PlatCommission: 0.03,
				index: 0,
			},
			cateList: [],
			bannerList: [],
			shopList: [],
			shopDetails: {},
			myAddress: {},
			selectedStyle: {}, // 规格（选定的规格的所有信息））
			quantity: 1,
			stock: 0, // 库存（对比可购买量）
			stylesList: [], // 选择规格（只有规格）
			ProductsList: [], // 规格（所有信息）
			selectedSpecIndex: 0, // // 当前选定的规格
			selectedStyle: {}, // 规格（选定的规格的所有信息））
			ProductStyleList: [],
			PageIndex: 1, //页码
			PageSize: 30,
			isMore: true, //是否还有更多
		};
	},
	computed: {
		minusImage() {
			return this.quantity > 1
				? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162992121443.png'
				: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162990142299.png';
		},
		plusImage() {
			return this.quantity < this.stock
				? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629860962316.png'
				: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629877490898.png';
		},
	},
	watch: {},
	async onShow() {
		this.getMyAddress();
	},
	async onLoad(e) {
		const that = this;
		await that.getCategorizeList();
		that.chooseCate = { ...that.cateList[0], index: 0 };

		this.$nextTick(() => {
			that.getHeight();
		});
		await that.getShopList();
	},
	onReachBottom() {},
	onUnload() {},
	onPageScroll(e) {
		// console.log(e.scrollTop);
		this.isNav = e.scrollTop > 325 ? true : false;
	},
	methods: {
		async getShopList() {
			let res = await this.$api.post('Products/SearchByCatalog', {
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
				ShopID: 0,
				ProductCatalogID: this.chooseCate.ID,
			});

			if (res.code == 0) {
				this.shopList = this.PageIndex == 1 ? (this.shopList = res.data) : this.shopList.concat(res.data);
				setTimeout(() => {
					this.load = true;
				}, 500);
			}

			this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
		},
		async getCategorizeList() {
			let res = await this.$api.post('Products/GetProductCatalog');
			if (res.code == 0) {
				this.cateList = res.data;
			}
		},
		clickCate(e, index) {
			const that = this;
			if (that.chooseCate.index != index) {
				that.PageIndex = 1;
				that.isMore = true;
				that.chooseCate = { ...e, index };
				that.getShopList();
			}
		},
		async getMyAddress() {
			let res = await this.$api.post('UserAddress/MyDefaultAddress');
			this.myAddress = res.data || false;
		},
		// 获取商品详细信息
		async getDetails(id) {
			let res = await this.$api.post('/Products/Detail', {
				ID: id,
			});

			if (res.code == 0) {
				this.shopDetails = res.data;
				this.stock = res.data.Stock;
				this.stylesList = res.data.ProductStyleList.map((item) => item.Style);
				this.ProductsList = res.data.ProductStyleList;
				this.selectedStyle = res.data.ProductStyleList[0];
				this.specImg = res.data.Images.split(',')[0];
			}
		},
		scrolltolower(e) {
			if (this.isMore) {
				this.PageIndex++;
				this.getShopList();
			}
		},
		async addShop(e) {
			this.getDetails(e.ID);
			this.$refs.buyNember.open();
		},
		//加入购物车
		async cart_add() {
			let res = await this.$api.post('ShopCard/Add', {
				ProductID: this.shopDetails.ID,
				Qty: this.quantity,
				ProductStyle: this.selectedStyle.Style,
				Price: this.selectedStyle.Promotion > 0 ? this.selectedStyle.Promotion : this.selectedStyle.Price,
				ProductImgs: this.shopDetails.Images.split(',')[0],
				Discounts: this.selectedStyle.Discounts,
				SKUID: this.selectedStyle.ID,
				Promotion: this.selectedStyle.Promotion,
			});
			if (res.code == 0) {
				this.$pv.msg('加入成功');
				this.closePopup();
			} else {
				this.$pv.msg(res.message);
			}
		},
		closePopup() {
			this.$refs.buyNember.close();
			setTimeout(() => {
				this.quantity = 1;
			}, 1000);
		},

		async decrease() {
			if (this.quantity > 1) {
				const yes = await this.getShopPrice(this.quantity - 1);
				if (yes) {
					this.quantity--;
				}
			}
		},
		async increase() {
			if (this.quantity < this.stock) {
				const yes = await this.getShopPrice(this.quantity + 1);
				if (yes) {
					this.quantity++;
				}
			}
		},
		handleQuantityChange(event) {
			this.quantity = Math.max(1, Math.min(event.target.value, this.stock));
		},
		// 获取价格
		async getShopPrice(num = 1) {
			return new Promise(async (resolve, reject) => {
				const that = this;
				const res = await this.$api.post('/Products/GetProductPromotion', {
					ProductID: that.shopDetails.ID,
					Qty: num,
				});
				const { code, data, msg } = res;
				if (code == 0) {
					that.shopDetails.ProductStyleList = data;
					that.ProductsList = data;
					that.selectedStyle = data[that.selectedSpecIndex];

					resolve(true);
				} else {
					that.$pv.msg(msg);
					resolve(false);
				}
			});
		},
		// 选择规格
		selectSpec(index) {
			this.selectedSpecIndex = index; //更改点击的规格成为新的选定规格
			this.selectedStyle = this.ProductsList[index];
		},
		getPayCount(item) {
			return item > 1000
				? (item / 1000).toFixed(1) + 'k'
				: item > 1000000
				? (item / 1000000).toFixed(1) + 'M'
				: item > 100000000
				? (item / 100000000).toFixed(1)
				: item;
		},
		// 点击跳转详情
		goDetail(id) {
			this.nav_to(`/pages/shop/detail?id=${id}`);
		},
		getHeight() {
			let that = this;
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(that);
				query
					.select('.navBox')
					.boundingClientRect((data) => {
						if (data) {
							// data.height 就是元素的高度
							that.fixboxHeight = data.height;
						}
					})
					.exec();
			}, 500);
		},
	},
};
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
	overflow: hidden;
}

view {
	box-sizing: border-box;
}

.categorizeBox {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	.loadBox {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: white;
		padding-top: 200rpx;
		z-index: 999;
	}
}

.navBox {
	// position: fixed;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 20rpx;
	// top: 0;
	// left: 0;
	// z-index: 999;
	// width: 750rpx;
	// height: 712rpx;
	// margin-bottom: 20rpx;
	// background: linear-gradient(180deg, #e65a8b 0%, #f692b5 40%, #f6f6f6 100%);
	background-color: #111;
	.tabsBack {
		height: 44px;
		display: flex;
		align-items: center;

		// justify-content: center;
		// padding-left: 16rpx;
		.logoimg {
			width: 192rpx;
			height: 48rpx;
			margin-left: 24rpx;
		}
	}

	.searchCell {
		width: 702rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 36rpx;
		margin: 0 auto;

		.scIcon {
			margin-right: 16rpx;
		}

		.searchimg {
			width: 32rpx;
			height: 32rpx;
			margin-left: 32rpx;
		}

		.scInp {
			flex: 1;
			margin-left: 5rpx;

			> input {
				width: 100%;
				background: transparent;
				margin-left: 16rpx;
			}

			.placname {
				color: #999999;
				font-size: 28rpx;
				// margin-left: 16rpx;
			}
		}

		.scBtnBox {
			display: flex;
			// margin-left: auto;
			margin-right: 8rpx;

			.scSumBtn {
				padding: 13rpx 34rpx;
				background: #e9d19b;
				border-radius: 32rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #4C310C;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				&:last-child {
					margin-left: 20rpx;
				}
			}
		}
	}
}

.cateBox {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	border-top-right-radius: 24rpx;
	border-top-left-radius: 24rpx;
	box-shadow: 0 8px 16px rgba(128, 128, 128, 0.5);

	.cateLeft {
		width: 30%;
		height: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;

		.clCell {
			width: 100%;
			background-color: #f5f6f9;
			overflow: hidden;
			border-right: 2rpx solid #eaebee;
			border-top: 2rpx solid #f5f6f9;
			border-bottom: 2rpx solid #f5f6f9;

			// box-shadow: inset 0 0 10px 5px rgba(128, 128, 128, 0.5);
			.clCTit {
				width: 100%;
				padding: 20rpx 6rpx;
				text-align: center;
			}
		}

		.clCellActive {
			background: #ffffff;
			border-right: 2rpx solid #ffffff;
			border-top: 2rpx solid #ffffff;
			border-bottom: 2rpx solid #ffffff;
		}

		.clCellAcTop {
			border-bottom-right-radius: 16rpx;
			border-bottom: 2rpx solid #eaebee;
		}

		.clCellAcBottom {
			border-top-right-radius: 16rpx;
			border-top: 2rpx solid #eaebee;
		}

		.clBgBox {
			width: 100%;
			flex: 1;
			background-color: #f5f6f9;
			border-right: 2rpx solid #eaebee;
		}
	}

	.cateRight {
		width: 70%;
		height: 100%;
		background-color: #ffffff;

		.shopBox {
			width: 100%;
			padding: 20rpx;

			.shopSwiper {
				width: 100%;

				.barimg {
					width: 100%;
					height: 200rpx;
					display: block;
					margin: 20rpx auto;

					swiper-item {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
						overflow: hidden;

						> image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.shopBoxList {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.shopCellBox {
					width: 100%;
					display: flex;
					justify-content: center;
					margin-bottom: 20rpx;
				}

				.heat_shop {
					width: 100%;
					position: relative;
					display: flex;

					.good_label {
						position: absolute;
						top: 0;
						left: 0;
						padding: 8rpx 12rpx;
						background-color: #ff471a;
						color: #fff;
						font-size: 16rpx;
						border-radius: 16rpx 0 16rpx 0;
					}

					.good_label_green {
						background-color: #1ed68d;
					}

					.heat_spimg {
						width: 200rpx;
						min-width: 200rpx;
						max-width: 200rpx;
						height: 200rpx;
						// background-color: red;
						border-radius: 16rpx;
					}

					.right_shop {
						width: calc(100% - 200rpx);
						min-width: calc(100% - 200rpx);
						max-width: calc(100% - 200rpx);
						padding: 0 10rpx;
						display: flex;
						flex-direction: column;
					}

					.heat_spname {
						width: 100%;
						height: 68rpx;
						font-size: 24rpx;
						display: -webkit-box;
						/* 设置为WebKit内核的弹性盒子模型 */
						-webkit-box-orient: vertical;
						/* 垂直排列 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						overflow: hidden;
						/* 隐藏超出范围的内容 */
						text-overflow: ellipsis;
						/* 使用省略号 */
					}

					.heat_price_box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: auto;

						.heat_payCount {
							font-size: 18rpx;
							color: #999;
						}
					}

					.shopBtnBox {
						width: 100%;
						display: flex;
						align-items: baseline;

						.heat_payCount {
							font-size: 18rpx;
							color: #999;
						}

						.shopAddBtn {
							// width: 200rpx;
							background: #e9d19b;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 20rpx;
							padding: 10rpx 26rpx;
							margin-left: auto;

							.pay_icon {
								width: 34rpx;
								height: 34rpx;
								display: block;
							}

							.pay_text {
								font-size: 24rpx;
								color: #4C310C;
							}
						}
					}

					.heat_price {
						font-size: 32rpx;
						font-weight: bold;
						color: #ff6030;
					}

					.pr_icon {
						font-size: 20rpx;
						font-weight: bold;
						color: #ff6030;
					}
				}
			}
		}
	}
}

.obj_choose {
	width: 100%;
	// height: 948rpx;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	background-color: #fff;
	padding-bottom: 200rpx;
	position: relative;

	.obj_preview {
		display: flex;
		justify-content: space-between;

		.obj_img {
			width: 176rpx;
			height: 176rpx;
			overflow: hidden;
			border-radius: 5rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.obj_info {
			// padding-top: 74rpx;
			width: 65%;
			min-height: 176rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.obj_price {
				font-size: 48rpx;
				color: #f91c1c;
				font-weight: bold;
				line-height: 66rpx;
				display: flex;
				align-items: baseline;

				.obj_price_text {
					color: #f91c1c;
					font-weight: bold;
					font-size: 22rpx;
				}

				.price {
					display: flex;
					color: #f91c1c;

					.dollor {
						font-size: 35rpx;
						color: #f91c1c;
					}
				}

				.promotion {
					display: flex;
					font-size: 28rpx;
					color: #ccc;
					text-decoration: line-through;
					margin-left: 14rpx;

					.dollor {
						font-size: 28rpx;
						color: #ccc;
					}
				}
			}

			.discountBox {
				width: 100%;
				display: flex;

				.disPrice {
					border: 2rpx solid #ff6030;
					color: #ff6030;
					font-size: 20rpx;
					padding: 4rpx 14rpx;
					border-radius: 10rpx;
				}
			}

			.obj_select {
				// line-height: 40rpx;
				display: inline-block;

				text {
					font-size: 28rpx;
				}

				.obj_selected {
					color: #999999;
					margin-right: 15rpx;
				}

				.obj_text {
					flex: 1;
					color: #333333;
				}
			}
		}

		.obj_close {
			width: 40rpx;
			height: 40rpx;
			background: #eeeeee;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.obj_head {
		display: flex;
		flex-direction: column;
		margin: 30rpx 0;

		.obj_title {
			font-size: 28rpx;
			color: #0d0d0d;
			font-weight: bold;
		}

		.obj_specs {
			// display: flex;
			margin: 20rpx 0 20rpx -10rpx;
			max-height: 270rpx;
			overflow-y: scroll;

			.obj_spec {
				max-width: max-content;
				height: 56rpx;
				padding: 0px 25rpx;
				background: #f2f2f2;
				border: 2rpx solid #f2f2f2;
				border-radius: 28rpx;
				font-size: 24rpx;
				color: #0d0d0d;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 10rpx;
				margin-bottom: 10rpx;
			}

			.obj_spec1 {
				color: #4C310C;
				background: linear-gradient(134deg, #fef9ef 0%, #fff4e3 100%);
				border: 4rpx solid #ffe4c3;  
			}
		}
	}

	.gifts_tips {
		font-size: 28rpx;
		color: #666666;
	}

	.obj_body {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.obj_title {
			font-size: 28rpx;
			color: #0d0d0d;
			font-weight: bold;
		}

		.obj_number {
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 120rpx;
			height: 40rpx;

			.obj_compute {
				width: 66rpx;
				height: 66rpx;
				margin: 0px 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 80%;
					height: 80%;
				}
			}

			input {
				width: 110rpx;
				background: #f2f2f2;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				color: #0d0d0d;
				height: 50rpx;
				line-height: 50rpx;
			}
		}

		.obj_inp {
			width: 60%;

			input {
				width: 100%;
				background-color: transparent;
				font-size: 28rpx;
				color: #000;
				text-align: right;
			}

			.input-placeholder {
				font-size: 28rpx;
			}
		}
	}

	.obj_tips {
		font-size: 24rpx;
		color: #999999;
		margin: 4rpx 0 20rpx 0;
	}

	.obj_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 70rpx;
		left: 0;
		width: 100%;
		padding: 0rpx 40rpx;

		.obj_left {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #333333;
			}

			.obj_total {
				font-size: 48rpx;
				color: #f91c1c;
				font-weight: bold;
				display: flex;
				align-items: center;

				.dollor {
					font-size: 35rpx;
					color: #f91c1c;
				}
			}
		}

		.obj_btn {
			font-size: 32rpx;
			color: #ffffff;
			width: 272rpx;
			height: 88rpx;
			    background: linear-gradient(98deg, #fad85b 0%, #B98B51 100%);

			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.obj_btn2 {
			font-size: 32rpx;
			color: #ffffff;
			width: 100%;
			height: 88rpx;
			    background: linear-gradient(98deg, #fad85b 0%, #B98B51 100%);

			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
